<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head><meta name="viewport" content="initial-scale=1.0, user-scalable=no" /><meta http-equiv="content-type" content="text/html; charset=UTF-8"/><meta http-equiv="pragma" content="no-cache"/>
        <title>Image Cut</title>
        <script type="text/javascript" src="js/jquery/jquery-1.4.4.min.js">
        </script>
        <script type="text/javascript" src="js/jquery.form.js">
        </script>
        <script type="text/javascript" src="js/jquery.mousewheel.js">
        </script>
        <script type="text/javascript" src="js/jquery-ui-1.8.11.custom/js/jquery-ui-1.8.11.custom.min.js">
        </script>
        <link rel="stylesheet" type="text/css" href="js/jquery-ui-1.8.11.custom/css/ui-lightness/jquery-ui-1.8.11.custom.css"/>
        <link rel="stylesheet" type="text/css" href="css/imagecut.css"/>
        <script type="text/javascript" src="js/imagecut.js">
        </script>
        <style type="text/css">
            .button {
                background-color: #aaa;
                border: 1px solid #bcbcbc;
                height: 29px;
            }
        </style>
        <script type="text/javascript">
            var imagecut;
            var fileinput;
            var _support_pic_types = ['.jpg','.jpeg','.png','.gif'];

            /**
             * 检查图片类型
             */
            function checkPicTypes(value) {
                var ext = value.substring(value.lastIndexOf(".")).toLowerCase();
                for(var i = 0;i < _support_pic_types.length;i++) {
                    if(ext == _support_pic_types[i]) {
                        return true;
                    }
                }
                return false;
            }


            function completeImageCut(){
                $.ajax({
                    url:'php/upload.php?do=save',
                    type:'GET',
                    dataType:'json',
                    data:imagecut.getData(),
                    success:function(data){
                        $("#imagecut-preview").html("<img src='"+data.url + "'/>");
                    }
                });
            }
	
	
            $(function() {

                fileinput = new AjaxFileInput({
                    form:$("#uploadpicform"),
                    file:$("#uploadpicformfile"),
                    filea:$("#uploadpicform a.button"),
                    onsubmit: function(file) {//提交前检查文件类型
                        var filevalue = file.attr("value");
                        if(!checkPicTypes(filevalue)){
                            alert("不支持的文件类型");
                            return false;
                        }
                        return true;
                    },
                    onsuccess: function(data) {//上传成功处理返回数据
                        imagecut.setPic(data.data);
                    },
                    onerror: function(data) {//上传出错处理
                        alert(data.msg);
                    }
                });

                imagecut = new luren.ui.ImageCut({
                    winwidth:400,//窗口宽度
                    winheight:400,//窗口高度
                    cutwidth:150,//剪切图片的宽度
                    cutheight:150,//剪切图片的高度
                    wrapper:$("#imagecut")
                });

            });
        </script>
    </head>
    <body>
        <div style="width:800px;min-height:600px;margin:auto;">

            <div id="imagecut" class="imagecut-wrapper">
                
                <div class="imagecut-fileinput">
                    <form id="uploadpicform" enctype="multipart/form-data"
                          action="php/upload.php?do=upload"
                          method="POST" onsubmit="return false;"
                          style="margin: auto;
                          text-align: center;
                          width: 300px;">
                        <a href="javascript:;" class="button" style="position: relative;
                           text-decoration: none;">
                            <span>从电脑中选择图片</span>
                            <input id="uploadpicformfile" style="display: block;
                                   height: 25px;
                                   left: 0;
                                   line-height: 25px;
                                   opacity: 0;
                                   filter:alpha(opacity=0);
                                   -khtml-opacity:0;
                                   padding: 0;
                                   position: absolute;
                                   overflow: hidden;
                                   color: white;
                                   top: 0;
                                   width: 75px;" name="attach" type="file"/>
                        </a>
                        <input type="hidden" name="uploadsubmit" value="true"/>
                        <input type="hidden" name="formhash" id="picuploadformhash" value="<!--{eval echo formhash();}-->" />
                    </form>
                    <span>支持jpg,png,gif格式的图片，最大4M</span>
                </div>

                
                
                <div class="imagecut-box">
                    <img class="imagecut-img" src=""/>
                    <div class="imagecut-box-l">
                    </div>
                    <div class="imagecut-box-t">
                    </div>
                    <div class="imagecut-box-b">
                    </div>
                    <div class="imagecut-box-r">
                    </div>
                </div>


                
                <div class="imagecut-bgopacity" style="width:100px;"></div>

                
                
                
                <div class="imagecut-zoomer">
                    <div class="imagecut-resizer">
                    </div>
                </div>
                <div id="imagecut-preview" class="imagecut-preview">
                </div>
                <div>
                    <button onclick="completeImageCut();">完成</button>
                </div>
            </div>
        </div>
    </body>
</html>
